<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>

    <main>
      <slot></slot>
    </main>

    <footer>
      <slot name="footer"></slot>
    </footer>

    <!--作用域插槽例1-->
    <slot name="range" :myUser="user"></slot>

    <!--作用于插槽例2-->
    <ul>
      <li v-for="item in  todosList" :key="item.id">
        <slot name="list" :itemValue="item">
        </slot>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "SoltDemo",
        // 插槽组件
        data() {
            return {
                user: 'Ross',
                todosList: this.todos
            }
        },
        props: {
            todos: Array
        }
    }
</script>

<style scoped>
  li{
    list-style: none;
  }

</style>
